<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link href="static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
    <link href="static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app" class="index-page dark-theme" v-cloak>
        <el-container id="container">
            <el-header id="header" class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <el-button :plain="true" :bg="false" @click="visibleState.aside = !visibleState.aside"
                        title="点击按钮展开或收起侧边栏">
                        <i class="el-icon-s-fold"></i>
                    </el-button>
                    <h3 class="text-white">立志愿管理系统</h3>
                </div>
                <div class="d-flex align-items-center">
                    <el-button @click="visibleState.messageBox = !visibleState.messageBox" class="me-2">
                        <i class="el-icon-bell fs-5"></i>
                    </el-button>
                    <el-dropdown @command="onChangeUserProfileMenu">
                        <div class="d-flex align-items-center text-white">
                            <el-image style="width: 25px; height: 25px" :src="dataOfUser.avatar"
                                :preview-src-list="[dataOfUser.avatar]"
                                class="rounded-circle border border-1 border-secondary">
                            </el-image>
                            <span class="ms-2">{{ dataOfUser.nick_name || dataOfUser.user_name }}</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                            <el-dropdown-item command="update-pwd">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <transition name="el-zoom-in-center">
                    <el-aside id="aside" v-show="visibleState.aside" width="210px">
                        <el-menu :default-openeds="['m0', 'm0-0']">
                            <el-submenu :index="'m' + idx" v-for="(item, idx) of dataOfMenu" :key="idx">
                                <template slot="title">{{ item.title }}</template>
                                <el-menu-item :index="'m' + idx + '-' + idx2" v-for="(item2, idx2) of item.children"
                                    :key="idx2" @click="onClickMenuItem(item2)">
                                    {{ item2.title }}
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                </transition>
                <el-main id="main">
                    <page-tabs ref="pageTabs" :default-tab="defaultTab" @refresh="showPageWithTab"></page-tabs>
                    <iframe ref="mainIframe" id="mainIframe" frameborder="0" allowfullscreen=""></iframe>
                </el-main>
            </el-container>
        </el-container>
        <!-- 容器 -->
        <messages-panel :visible.sync="visibleState.messageBox"></messages-panel>
        <!-- 子页面弹窗 -->
        <el-dialog class="dialog-page" :title="propsOfIframeDialog.title" :visible.sync="propsOfIframeDialog.visible">
            <iframe ref="dialogIframe" frameborder="0" :style="propsOfIframeDialog.size"></iframe>
        </el-dialog>
        <!-- 修改密码弹窗 -->
        <edit-password-dialog :visible.sync="visibleState.editPasswordDialog"></edit-password-dialog>

    </div>
    <script src="static/vendor/vue@2.6.14/dist/vue.min.js"></script>
    <script src="static/vendor/element-ui@2.15.9/lib/index.js"></script>
    <script src="static/vendor/axios@0.27.2/dist/axios.min.js"></script>
    <script src="static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
    <script src="static/js/utils.min.js"></script>
    <script src="static/mock/admin/api-route.js?v=1.0.0"></script>
    <script src="static/mock/admin/index.js?v=1.0.0"></script>
    <script src="static/eladmin/js/elcomponents.min.js"></script>
    <script>

        // 强制跳转到规范的路径，免得填坑麻烦。（例如直接键入网址：/admin）
        if (window.location.pathname.indexOf('.html') == -1) {
            location.href = '/admin/index.html';
            throw new Error("路径不规范");
        }

        // 使用模拟数据
        // useMockData();

        // 登陆状态校验
        if (!LoginState.isLogin()) {
            location.href = 'login.html'
        }


        /**
        * 首页组件
        * @description 首页组件
        */
        const App = {
            el: '#app',
            name: "App",
            data() {
                return {
                    defaultTab: {
                        id: 'm0',
                        title: '起始页',
                        url: 'index/main.html',
                    },
                    loadingInstance: null,
                    visibleState: {
                        aside: true,
                        messageBox: false,
                        editPasswordDialog: false,
                    },
                    // 对话框IFrame属性
                    propsOfIframeDialog: {
                        title: '',
                        visible: false,
                        size: {}
                    },
                    // 用户数据
                    dataOfUser: {
                        id: 1,
                        user_name: "admin",
                        nick_name: "天澜",
                        avatar:
                            "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJnMX3WfLHDmqX7jssRbic4VSHSKtbvicrGmXGxGsQn2YUqaAIQsMofRe87925ZjLyNFYmSg3fOibZxw/132",
                    },
                    // 菜单数据
                    dataOfMenu: [
                        {
                            id: 10,
                            title: "控制面板",
                            url: "",
                            children: [
                                { id: 11, title: "运营统计", url: "/index/index" },
                            ],
                        },
                        {
                            id: 20,
                            title: "会员管理",
                            url: "",
                            children: [
                                { id: 21, title: "会员管理", url: "/members/index" },
                                { id: 22, title: "会员等级-", url: "/member-levels/index" },
                            ],
                        },
                        {
                            id: 30,
                            title: "系统设置",
                            url: "",
                            children: [
                                { id: 31, title: "网站设置", url: "/sys-configs/settings" },
                                { id: 32, title: "字典数据-", url: "/sys-dicts/index" },
                                { id: 33, title: "配置管理-", url: "/sys-configs/index" },
                                { id: 34, title: "通知公告", url: "/sys-notices/index" },
                            ],
                        },
                        {
                            id: 40,
                            title: "权限管理",
                            url: "",
                            children: [
                                { id: 41, title: "管理员管理", url: "/auth-admins/index" },
                                { id: 42, title: "角色管理", url: "/auth-groups/index" },
                                { id: 43, title: "菜单管理", url: "/auth-rules/index" },
                                { id: 44, title: "岗位管理-", url: "/auth-jobs/index" },
                                { id: 45, title: "部门管理-", url: "/auth-departments/index" },
                            ],
                        },
                    ],
                };
            },
            methods: {
                /**
                 * 点击菜单操作（创建标签页并加载页面）
                 * item={id, title, url}
                 */
                onClickMenuItem(item) {
                    if (item.url.indexOf('.html') == -1) {
                        item.url = '.' + item.url + '.html'
                    }
                    console.log('onClickMenuItem', item);
                    // this.$router.push(item.url);
                    this.$refs.pageTabs.addTab(item);
                },
                // 切换标签页
                showPageWithTab(item) {
                    console.log('showPageWithTab', item);
                    EsUtils.handleIframe(this.$refs.mainIframe, 'load', item.url);
                },
                // 用户信息下拉菜单操作
                onChangeUserProfileMenu(command) {
                    switch (command) {
                        case "logout":
                            // 点击退出登录操作
                            this.logout();
                            break;
                        case "update-pwd":
                            // this.visibleState.editPasswordDialog = true;
                            this.onClickMenuItem({ id: 'update-pwd', url: 'profile.html?tab=password', title: '修改密码' })
                            break;
                        case "profile":
                            this.onClickMenuItem({ id: 'profile', url: 'profile.html?tab=info', title: '个人资料' })
                            break;
                        default:
                            break;
                    }
                },
                // 退出登录操作
                logout() {
                    this.$confirm("您确定要退出登录吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        // 清空数据
                        this.dataOfMenu = [];
                        LoginState.clearLoginInfo();
                        location.href = "login.html";
                    }).catch(() => { });
                },
            },
            created() {
                // 加载用户信息
                this.vuiAjax.get(this.apiRoute.authAdminsRead, { params: { id: 0 } })
                    .then(msgInfo => {
                        if (!msgInfo.success) {
                            this.$message.error(msgInfo.message);
                            return;
                        }
                        this.dataOfUser = msgInfo.data.data;
                    }).catch(msgInfo => {
                        this.$message.error(msgInfo.message);
                    })

                // 加载菜单数据
                this.vuiAjax.get(this.apiRoute.menu).then(msgInfo => {
                    if (!msgInfo.success) {
                        this.$message.error(msgInfo.message);
                        return;
                    }
                    // this.dataOfMenu = msgInfo.data;
                }).catch(msgInfo => {
                    this.$message.error(msgInfo.message);
                })
            },
            mounted() {
                let _this = this;
                // 声明全局函数：打开IFrame页面对话框。支持定制窗口尺寸 {width:'800px',height:'420px'}（用于子窗体调用）
                window.showIframeDialog = function (title, url, opener, size) {
                    _this.propsOfIframeDialog = { title, url, visible: true, opener, size }
                    _this.$nextTick(() => {
                        EsUtils.handleIframe(_this.$refs.dialogIframe, '', url);
                    })
                }
                // 声明全局函数：关闭IFrame页面对话框。（用于子窗体调用）
                window.closeIframeDialog = function () {
                    _this.propsOfIframeDialog.visible = false;
                }
                // 声明全局函数：调用主要Iframe页面的某个方法（用于子窗体调用）
                window.callIframeMethod = function (method, option) {
                    if (!_this.$refs.mainIframe.contentWindow[method]) {
                        console.log('系统错误：未定义 opener 窗体方法 ' + method);
                        return;
                    }
                    _this.$refs.mainIframe.contentWindow[method](option);
                }
                // 声明全局函数：创建标签页（用于子窗体调用）
                window.showTabPage = function (id, title, url) {
                    _this.onClickMenuItem({ id, title, url });
                }
                // 声明全局函数：显示消息（用于子窗体调用）
                window.showMessage = function (option) {
                    _this.$message(option);
                }
                // 声明全局函数：显示加载中全屏遮罩（用于子窗体调用）
                window.showLoading = function () {
                    _this.loadingInstance = _this.$loading({ fullscreen: true });
                }
                // 声明全局函数：关闭加载中全屏遮罩（用于子窗体调用）
                window.hideLoading = function () {
                    if (!_this.loadingInstance) {
                        return;
                    }
                    _this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        _this.loadingInstance.close();
                    });
                }
            },
        };

        // 全局加载组件
        Vue.use(ElComponents);
        Vue.prototype.apiRoute = new ApiRoute();
        // 获取标准消息格式的 axios 实例
        Vue.prototype.vuiAjax = EsUtils.getStdAjax();
        // 创建应用实例
        var app = new Vue(App)

        // 全局应用类（用于 Iframe 父子页面交互操作）
        class GlobalApp {
            // 子页面调用 window.opener 页面的 refreshDataTable() 方法来刷新父页面的数据表格
            refreshDataTable() {
                window.callIframeMethod('refreshDataTable');
            }
            /**
             * 全局快捷公开方法 - 显示表单对话框
             * @param {String} text 
             * @param {String} link 
             * @param {Any} id 
             */
            showFormDialog(title, url, opener = null, size = {}) {
                console.log('显示表单对话框', url);
                window.showIframeDialog(title, url, opener, size);
            }
            // 全局快捷公开方法 - 关闭表单对话框
            closeFormDialog() {
                window.closeIframeDialog();
            }
            /**
             * 全局快捷公开方法 - 创建菜单标签
             * @param {String} text 
             * @param {String} link 
             * @param {Any} id 
             */
            showTabPage(text, link, id = 0) {
                if (id == 0) {
                    id = new Date().getTime();
                }
                window.showTabPage(id, text, link);
            }
            showLoading() {
                window.showLoading();
            }
            hideLoading() {
                window.hideLoading();
            }
            showMessage(option) {
                window.showMessage(option);
            }
        }

        // 实例化全局应用，供子页面使用
        globalApp = new GlobalApp();
    </script>
</body>

</html>